<template>
	<view class="samplePage">
		<form @submit="formSubmit">
			<view class="address">
				<view class="item br">
					<text class="label">收货人：</text>
					<view class="right">
						<input name="shrName" :value="addressObj.shrName" class="input" type="text" placeholder="请输入收货人" />
					</view>
				</view>
				<view class="item br">
					<text class="label">联系电话：</text>
					<view class="right">
						<input name="mobile" :value="addressObj.mobile" class="input" type="number" maxlength='11' placeholder="请输入手机号" />
					</view>
				</view>
				<view class="item br">
					<text class="label">收货地址：</text>
					<view class="right">
						<input name="address" :value="addressObj.address" class="input" type="text" placeholder="请输入收货地址" />
						<view @click="getAddr" class="map">
							<u-icon name="map" color="#000" size="16"></u-icon>
						</view>
					</view>
				</view>
				<!-- <view class="item">
					<text class="label">详细地址：</text>
					<view class="right">
						<input name="beizhu" :value="addressObj.beizhu" class="input" type="text" placeholder="请输入详细地址" />
					</view>
				</view> -->
			</view>
			<!-- <view class="sned_btn">完成</view> -->
			<button form-type="submit" class="sned_btn">完成</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileServer: this.$fileServer,
				isSuccess:false,
				addressObj:{
					shrName:'',
					mobile:'',
					address:'',
				},
			};
		},
		onLoad(options) {
			let _this = this;
			try{
				const eventChannel = this.getOpenerEventChannel();
				// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
				eventChannel.on('addressPage', (data) => {
					console.log(data);
					if(data.shrName){
						_this.addressObj = data
					}
					
				})
			}catch(e){
				//TODO handle the exception
			}
		},
		methods: {
			getAddr(){
				uni.chooseLocation({
					success: (res) => {
						console.log('res', res);
						this.addressObj.address = res.address
					}
				})
			},
			formSubmit(e){
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				let obj = e.detail.value;
				if(!obj.shrName){
					uni.showToast({
						title: '请输入收货人',
						icon: "none"
					})
					return false
				}
				if(!obj.mobile){
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
					return false
				}
				if(!obj.address){
					uni.showToast({
						title: '请输入收货地址',
						icon: "none"
					})
					return false
				}
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('addrEvent', obj);
				uni.navigateBack()
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.samplePage {background-color: #F5F5F5;min-height: 100vh;
		.address{width: 750rpx;background: #FFFFFF;border-radius: 20rpx;padding: 0 34rpx;position: relative;
			.item{display: flex;align-items: center;height: 96rpx;
				&.br{border-bottom: 1px solid #eee;}
				.label{color: #777777;font-size: 28rpx;flex: 0 0 140rpx;}
				.right{flex: 1;padding-left: 30rpx;display: flex;justify-content: space-between;align-items: center;
					.input{flex: 1;height: 96rpx;color: #333333;font-size: 28rpx;}
					.map{padding-left: 30rpx;}
				}
			}
		}
		.sned_btn{position: fixed;left:0;right:0;bottom:30rpx;margin:auto;width: 644rpx;height: 94rpx;line-height: 94rpx;background: #EC2424;border-radius: 47rpx;color: #FFFFFF;font-size: 32rpx;text-align: center;}
	
	}
</style>